<!-- 关系图形状设置 -->
<template>
  <div class="echart-series-line">
    <FormItem
      :form="form"
      option="edgeShape"
      :label="$demoi18n('word.shape')"
      type="radio"
      :options="edgeShapes"
      serie-type="tree"
    />
    <FormItem
      :form="form"
      option="echart.series.lineStyle.type"
      :label="$demoi18n('echart.label.lineType')"
      type="select"
      :options="lineTypes"
      serie-type="tree"
    />
    <FormItem
      :form="form"
      option="echart.series.lineStyle.width"
      :label="$demoi18n('echart.label.lineweight')"
      type="number"
      serie-type="tree"
    />
    <FormItem
      v-if="form.edgeShape === 'curve'"
      :form="form"
      option="leafNodeRender"
      :label="$demoi18n('echart.label.leafNodeRendering')"
      :helptip="$demoi18n('echart.label.leafNodeRenderingTip')"
    >
      <div>
        <el-radio v-model="form.leafNodeRender" label="noRender">{{ $demoi18n('echart.label.noRendering') }}</el-radio><br />
        <el-radio v-model="form.leafNodeRender" label="max">{{ $demoi18n('echart.label.renderMax') }}</el-radio><br />
        <el-radio v-model="form.leafNodeRender" label="min">{{ $demoi18n('echart.label.renderMinimum') }}</el-radio><br />
        <el-radio v-model="form.leafNodeRender" label="custom">{{ $demoi18n('echart.label.customRenderValues') }}</el-radio>
      </div>
    </FormItem>
    <FormItem
      v-if="form.edgeShape === 'curve' && form.leafNodeRender === 'custom'"
      class="type-number"
      :form="form"
      option="intervalStartValue"
      :label="$demoi18n('echart.label.customStartValue')"
      type="number"
      :min="-100000000"
      :max="form.intervalEndValue"
      :precision="4"
    />
    <FormItem
      v-if="form.edgeShape === 'curve' && form.leafNodeRender === 'custom'"
      class="type-number"
      :form="form"
      option="intervalEndValue"
      :label="$demoi18n('echart.label.customEndpointValue')"
      type="number"
      :min="form.intervalStartValue"
      :precision="4"
    />
    <FormItem
      v-if="form.edgeShape === 'curve' && form.leafNodeRender !== 'noRender'"
      :form="form"
      option="lineColor"
      :label="$demoi18n('echart.label.lineColor')"
      type="color"
    />
    <FormItem
      v-if="form.edgeShape === 'curve' && form.leafNodeRender !== 'noRender'"
      class="type-number"
      :form="form"
      option="lineWidth"
      :label="$demoi18n('echart.label.lineWidth')"
      type="number"
      :min="1"
      :max="5"
    />
  </div>
</template>
<script>
import FormItem from '@/components/common/echart/form-item.vue';
import { lineTypes } from '@/components/common/echart/form-item-options.js';
import EchartCommonMixin from '@/components/common/echart/mixins/echart-common-mixin.js';

export default {
  components: { FormItem },
  mixins: [EchartCommonMixin],
  props: {
    form: Object,
  },
  data() {
    return {
      lineTypes,
      edgeShapes: [
        { label: this.$demoi18n('word.curve'), value: 'curve' },
        { label: this.$demoi18n('word.brokenLine'), value: 'polyline' },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {},
};
</script>
<style lang="less" scoped>
.echart-series-line .type-number {
    :deep(.cont) {
    display: block;
    width: 96%;
  }
}
</style>
